<template lang="pug">
.pagination-wrap
    el-pagination(
        :small="true"
        :layout="layout"
        :total="curPage.total"
        :page-size="curPage.pageSize"
        :current-page="curPage.currentPage"
        :pager-count="pagerCountCopy"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    )
</template>
<script setup>
import { reactive, ref, watch } from 'vue'


const pagerCountCopy = ref(0)
const props = defineProps({
    pageSizes: {
        type: Array,
        default: function(){
            return [10, 15, 20, 50]
        }
    },
    pagerCount: {
        type: Number,
        default: 7
    },
    layout: { // 要展示的内容
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    page: { //当前页，总数
        type: Object,
        default: function(){
            return {
                total: 0,
                pageSize: 15,
                currentPage: 1
            }
        }
    }
})
const curPage = ref({})

watch(()=>props.page, (n, o)=>{
    curPage.value = n
}, { immediate: true, deep: true })
watch(()=>props.pagerCount, (n, o)=>{
    pagerCountCopy.value = n
}, { immediate: true })
let timer

const emit = defineEmits(['pageChage'])
const handleCurrentChange = (currentPage) => {
    curPage.value.currentPage = currentPage
    if (timer){
        clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(()=>{
        emit('pageChage', curPage.value)
    }, 10)
}

const handleSizeChange = (size) => {//size是页面滚动条的大小，页面滚动条大小不
    curPage.value.pageSize = size
    curPage.value.currentPage = 1
    if (timer){
        clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(()=>{
        emit('pageChage', curPage.value)
    }, 10)
}
</script>
<style lang="less" scoped>
.pagination-wrap{
    margin: 10px 0;
    display: flex;
    justify-content:flex-end;
    min-height: 32px;
    :deep(.el-pagination){
        padding: 0 20px;
    }
}
</style>